<template>
	<view class="work-container">
		<view class="top">
			<view class="image">
				<image-view class="img" v-if="captureFaceUrl" :src="captureFaceUrl" :big="true" :qj='panoramaUrl'>
				</image-view>
			</view>
		</view>
		<ul class="ul">
			<li class="li">
				<view class="title">{{ $t('search:gender') }}</view>
				<view class="tit">{{ formatSex }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:age') }}</view>
				<view class="tit">{{ age }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:time') }}</view>
				<view class="tit">{{ captureTime }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:device') }}</view>
				<view class="tit">{{ equipment }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:address') }}</view>
				<view class="tit">{{ address }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:wearingGlasses') }}</view>
				<view class="tit">{{ glasses }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:wearingSunglasses') }}</view>
				<view class="tit">{{ sunglasses }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:wearingMask') }}</view>
				<view class="tit">{{ mask }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:ethnicity') }}</view>
				<view class="tit">{{ nationName }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('warn:remark') }}</view>
				<view class="tit">{{ remarks }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('warn:location') }}</view>
				<view class="tit blue-txt" @click="gotoMap" v-if="lng != null && lat != null">{{ lng }},{{ lat }}</view>
				<view class="tit " v-else>{{ $t('warn:noData') }}</view>
			</li>
		</ul>
		<view style="width: 750rpx;height: 120rpx;"></view>
	</view>
</template>

<script>
import {
	strangerList,
	updataTypeface
} from '@/api/warning/index.js'
import {
	getNationName
} from '@/utils/dict'
export default {
	data() {
		return {
			list: [],
			glasses: '',
			sex: '',
			age: '',
			remarks: '',
			mask: '',
			equipment: '',
			time: '',
			address: '',
			sunglasses: '',
			captureFaceUrl: '',
			nation: '',
			nationName: '',
			panoramaUrl: '',
			lng: '',
			lat: '',
			alarmId: '',
		}
	},
	computed: {
		captureTime() {
			const num = this.time
			if (num == '' || num == null) {
				return this.$t('search:none')
			} else {
				let date = new Date(num);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
			}
		},
		formatSex() {
			const str = this.sex,
				sexEnum = {
					"1": this.$t('search:male'),
					"2": this.$t('search:female'),
				}
			return sexEnum[str] || '--'
		}
	},
	onLoad(option) {
		this.setDetail(JSON.parse(option.data))
		this.alarmId = option.alarmId
	},
	methods: {
		//位置详情页面
		gotoMap() {
			this.$tab.navigateTo('/pages/warning/components/map_one?lng=' + this.lng + '&lat=' + this.lat)
		},
		showPanorama() {
			uni.previewImage({
				urls: ['/fileApi/' + this.panoramaUrl],
				current: '', // 当前显示图片的http链接，默认是第一个
			})
		},
		setDetail(data) {
			this.sex = data.topns[0].faceGender ? data.topns[0].faceGender : this.$t('search:none')
			this.age = data.age ? data.age : this.$t('search:none')
			this.certificateNo = data.topns[0].faceCardId ? data.topns[0].faceCardId : this.$t('search:none')
			this.reservoir = data.topns[0].facedbName ? data.topns[0].facedbName : this.$t('search:none')
			this.glasses = data.glassesState === 1 ? this.$t('search:wearing') : this.$t('search:notWearing')
			this.sunglasses = data.sunGlassesState === 1 ? this.$t('search:wearing') : this.$t('search:notWearing')
			this.mask = data.maskState === 1 ? this.$t('search:wearing') : this.$t('search:notWearing')
			this.remarks = data.topns[0].remark ? data.topns[0].remark : this.$t('search:none')
			this.nation = data.nation
			this.nationName = getNationName(data.nation)
			this.equipment = data.deviceName ? data.deviceName : this.$t('search:none')
			this.time = data.captureTime
			this.address = data.address ? data.address : this.$t('search:none')
			this.faceUrl = data.topns[0].faceUrl
			this.captureFaceUrl = data.captureUrl
			this.panoramaUrl = data.panoramaUrl
			this.lng = data.lng
			this.lat = data.lat
		}
	}
}
</script>

<style>
page {
	background-color: #fff;
}

.top {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40rpx;
}

.top .image {
	width: 35%;
}

.image .img {
	width: 235rpx;
	height: 235rpx;
	border-radius: 10rpx;
}

.ul {
	padding: 0 40rpx;
}

.li {
	display: flex;
	align-items: center;
	justify-content: start;
	padding: 30rpx 0;
	border-bottom: 1px solid #ddd;
}

.li .title {
	color: #595959;
	width: 30%;
}

.li .tit {
	width: 70%;
	color: #000;
	display: flex;
	justify-content: flex-end;
}

.blue-txt {
	color: #2979ff !important;
}
</style>